<template>
    <el-row class="allotorderruleedit">
        <el-col :span="24" class="content-header">分单规则配置--修改
            <span class="left-10">
                <el-button type="text" @click="global.goPage($router, 'allotorderrule', {});">返回</el-button>
            </span>
        </el-col>
        <el-card class="box">
            <el-row>
                <el-collapse v-model="activeNames">
                    <el-collapse-item title="分单规则基本信息" name="basic">
                        <el-row>
                            <el-col :span="23" :offset="1">
                                <el-form :model="dateForm" label-width="150px" :label-position="labelPosition">
                                    <el-form-item label="分单规则名称：" required>
                                        <el-col :span="12">
                                            <el-input v-model="dateForm.name" placeholder="分单规则名称"></el-input>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="起止时间：" required>
                                        <el-col :span="12">
                                            <el-date-picker v-model="dateForm.dateRange" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;">
                                            </el-date-picker>
                                        </el-col>
                                    </el-form-item>
                                </el-form>
                            </el-col>
                        </el-row>
                    </el-collapse-item>
                    <el-collapse-item title="产品信息" name="product">
                        <el-tabs v-model="active2" type="card">
                            <el-tab-pane label="类型" name="type">
                                <v-category v-model="selectedCategory" :object.sync="categoryObject" type="productCategory"></v-category>
                            </el-tab-pane>
                            <el-tab-pane label="明细" name="detail" class="detail">
                                <el-row :gutter="20">
                                    <el-col :span="2">
                                        <el-button plain size="small">添加</el-button>
                                    </el-col>
                                    <el-col :span="22">
                                        <v-productList v-model="productList"></v-productList>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                        </el-tabs>
                    </el-collapse-item>
                    <el-collapse-item title="配送范围" name="range">
                        <el-tabs v-model="active3" type="card">
                            <el-tab-pane label="客户类型" name="type">
                                <v-category v-model="selectedEnterType" :object.sync="enterTypeObject" type="enterType" :allflag="false"></v-category>
                            </el-tab-pane>
                            <el-tab-pane label="客户区域" name="range">
                                <v-category v-model="selectedEnterRange" :object.sync="enterRangeObject" type="enterRange"></v-category>
                            </el-tab-pane>
                            <el-tab-pane label="客户明细" name="detail" class="detail">
                                <el-row :gutter="20">
                                    <el-col :span="2">
                                        <el-button plain size="small">添加</el-button>
                                    </el-col>
                                    <el-col :span="22">
                                        <v-enterList v-model="enterList"></v-enterList>
                                    </el-col>
                                </el-row>
                            </el-tab-pane>
                        </el-tabs>
                    </el-collapse-item>
                    <el-collapse-item title="配送商" name="distributor">
                        <el-row :gutter="20">
                            <el-col :span="2">
                                <el-button plain size="small">添加</el-button>
                            </el-col>
                            <el-col :span="22">
                                <v-enterList v-model="distributorList"></v-enterList>
                            </el-col>
                        </el-row>

                    </el-collapse-item>
                </el-collapse>
                <el-col :span="24" class="foot-button">
                    <el-button size="small" type="primary" @click="submitForm">提交</el-button>
                </el-col>
            </el-row>
        </el-card>
    </el-row>
</template>
<script>
import "./edit.scss";
import router from "@/router/index";
import category from "@/common/category/index.vue";
import enterList from "@/common/enterList/index.vue";
import productList from "@/common/productList/index.vue";

export default {
  data() {
    return {
      labelPosition: "right",
      activeNames: ["basic", "product", "range", "distributor"],
      active2: "type",
      active3: "type",
      dateForm: {
        name: "",
        dateRange: []
      },
      selectedCategory: [],
      categoryObject: [],
      enterList: [],
      selectedEnterType: [],
      enterTypeObject: [],
      selectedEnterRange: [],
      enterRangeObject: [],
      distributorList: [],
      productList : []
    };
  },
  components: {
    "v-category": category,
    "v-enterList": enterList,
    "v-productList" : productList
  },
  methods: {
    delProduct: function(index) {
      console.info(index);
      this.productArr.splice(index, 1);
    },
    submitForm: function() {
      this.vildateForm();
      //console.info(this.selectedCategory);
      //console.info(this.categoryObject);
      //console.info(this.enterList);
    },
    vildateForm: function() {}
  },
  watch: {},
  mounted: function() {},
  created: function() {},
  beforeDestroy: function() {}
};
</script>